<template>
  <div class="container">
    <AsideTitle :headeline="headeline" :icon="icon"></AsideTitle>
    <el-card>
      <!-- 头部搜索 -->
      <HeadSearch @showdialog="showdialog" @searchHotline="searchHotline" :queryInfo="queryInfo" @clear="handleClear"></HeadSearch>

      <!-- 表格区域 -->
      <!-- 表格区域 -->
      <el-table border stripe :data="tableData" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column label="案件标题" prop="title"></el-table-column>
        <el-table-column label="案件内容" prop="content" width="450px">
          <template slot-scope="scope">
            <div class="contentShow" v-html="scope.row.content"></div>
          </template>
        </el-table-column>
        <el-table-column label="创建人" prop="createdBy"></el-table-column>
        <el-table-column label="创建时间" prop="createdAt"></el-table-column>
        <el-table-column label="信息来源" prop="sourceInfo"></el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit" class="handlebtn" @click="showdialog('editnotice',scope.row)">修改</el-button>
            <el-button class="handlebtn" type="danger" size="mini" icon="el-icon-delete" @click="delhotline(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="pag">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="queryInfo.pageNum" :page-sizes="[5, 10, 20, 40]" :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
    </el-card>
    <!-- 弹框组件 -->
    <choose-category :dialog="dialog" @FnDialog="FnDialog"></choose-category>
  </div>
</template>

<script>
import AsideTitle from "@/components/asideTitle";
import HeadSearch from "@/components/headSearch";
import ChooseCategory from "@/components/chooseCategory";
export default {
  components: {
    AsideTitle,
    HeadSearch,
    ChooseCategory
  },
  data() {
    return {
      bizType: "caseSelect", //模块类型
      headeline: "案件选登管理",
      icon: "fa-database",
      //查询和分页参数
      queryInfo: {
        title: "",
        sourceInfo: "",
        pageNum: 1,
        pageSize: 5,
        bizType: "caseSelect"
      },
      tableData: [
      ],
      total: 1,
      // 弹窗数据
      dialog: {
        showDialog: false,
        title: "",
        width: "500px",
        data: {}
      }
    };
  },
  mounted() {
    this.getHotlineTableData();
  },
  methods: {
    //顶部搜索按钮搜索
    searchHotline(queryInfo) {
      console.log(queryInfo);

      if (!queryInfo.title && !queryInfo.sourceInfo) {
        return this.$message.error("信息来源和标题不能同时为空");
      } else {
        this.getHotlineTableData();
      }
    },
    //获取数据
    async getHotlineTableData() {
      let { data: res } = await this._API.pageQuery(this.queryInfo);

      if (res.code != 0) {
        return this.$message.error("获取信息失败");
      } else {
        console.log(res);

        this.tableData = res.data;
        this.total = res.totalCount;
      }
    },
    //切换每页数据
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      THIS.getHotlineTableData();
    },
    //切换到多少页
    handleCurrentChange(newNum) {
      this.queryInfo.pageNum = newNum;
      this.getHotlineTableData();
    },
    //点击删除按钮
    async delhotline(val) {
      let confirmResult = await this.$confirm(
        "此操作将永久删除该热线, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).catch(err => err);
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除！");
      }

      this.keyId = val.id;
      let { data: res } = await this._API.deleteById({
        id: this.keyId,
        deleter: "deldefaule" //没写登录 默认值
      });
      if (res.code == 0) {
        this.$message.success("删除成功");
        this.getHotlineTableData();
      }
    },
    // 弹窗接收组件数据
    async FnDialog(val) {
      let dialog = this.dialog;
      //编辑
      if (val.type == "submit" && val.data.editnotice) {
        val.data.noticeDetail = val.content;
        if (val.data.noticeTitle == "") {
          this.$message.warning("标题不能为空");
          return false;
        }
        if (val.data.noticeOrigin === "") {
          this.$message.warning("信息来源不能为空");
          return false;
        }
        if (val.data.noticeDetail == "") {
          this.$message.warning("内容不能为空");
          return false;
        }
        if (val.data.noticeAuthor === "") {
          this.$message.warning("发布者不能为空");
          return false;
        }
        console.log(val.data);

        let { data: res } = await this._API.update({
          title: val.data.noticeTitle,
          sourceInfo: val.data.noticeOrigin,
          content: val.data.noticeDetail,
          imageUrl: val.imgUrl,
          createdBy: val.data.noticeAuthor,
          bizType: this.bizType,
          id: val.data.id,
          img: val.img
        });

        if (res.code == 0) {
          this.$message.success("修改成功");
          this.getHotlineTableData();
        } else {
          this.$message.warning("修改失败");
        }

        dialog.showDialog = false;
      }
      //新增
      if (val.type == "submit" && val.data.addnotice) {
        val.data.noticeDetail = val.content;
        if (val.data.noticeTitle == "") {
          this.$message.warning("标题不能为空");
          return false;
        }
        if (val.data.noticeOrigin === "") {
          this.$message.warning("信息来源不能为空");
          return false;
        }
        if (val.data.noticeDetail == "") {
          this.$message.warning("内容不能为空");
          return false;
        }
        if (val.data.noticeAuthor === "") {
          this.$message.warning("发布者不能为空");
          return false;
        }
        console.log(val);

        let { data: res } = await this._API.add({
          title: val.data.noticeTitle,
          sourceInfo: val.data.noticeOrigin,
          content: val.data.noticeDetail,
          imageUrl: val.imgUrl,
          createdBy: "admin",
          bizType: this.bizType,
          img: val.img
        });
        dialog.showDialog = false;
        console.log(res);
        if (res.code == 0) {
          this.getHotlineTableData();
        }
      }

      if (val.type == "close") {
        dialog.showDialog = false;
      }
    },
    // 弹窗展示传递数据
    showdialog(type, val) {
      console.log(val);
      let _this = this;
      let dialog = this.dialog;
      switch (type) {
        case "addnotice":
          const loading = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.2)"
          });

          // console.log(res.data.obj)
          loading.close();
          dialog.showDialog = true;
          dialog.title = "新增";
          dialog.width = "660px";
          dialog.data = {
            addnotice: true,
            noticeTitle: "",

            noticeOrigin: "",
            noticeDetail: "",
            //  noticePublishUserId: this.user.userId,
            noticeAuthor: ""
          };

          break;
        case "editnotice":
          const loadings = this.$loading({
            lock: true,
            text: "Loading",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.2)"
          });

          // console.log(res.data.obj)
          loadings.close();
          dialog.showDialog = true;
          console.log(val);

          dialog.title = "修改";
          dialog.width = "660px";
          dialog.data = {
            editnotice: true,
            noticeTitle: val.title,
            imageUrl: val.imageUrl,
            noticeOrigin: val.sourceInfo,
            noticeDetail: val.content,
            noticeAuthor: val.createdBy ? val.createdBy : "admin",
            id: val.id
          };
          break;
      }
    },
    //取消搜索记录
    handleClear() {
      this.getHotlineTableData();
    }
  }
};
</script>

<style lang="scss" scoped>
.pag {
  display: flex;
  justify-content: space-between;
}
.contentShow {
  height: 150px;
  width: 350px;
  overflow: hidden;
}
</style>